<template>
	<div class="divmain" style="padding: 0px 20px 0px 20px;display: block;height: 100%;">
		<div ref="divForm" style="padding: 20px 0px 0px 0px;">
			<el-form inline :model="formData">
				<el-row>
					<el-col :span="18">
						<el-form-item label="项目名称/编号:">
							<el-input placeholder="请输入名称或编号" v-model="formData.BankInfo"></el-input>
						</el-form-item>
						<el-form-item label="开始时间">
							<el-date-picker format="yyyy-MM-dd" v-model="formData.StartTime"></el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker format="yyyy-MM-dd" v-model="formData.EndTime"></el-date-picker>
						</el-form-item>
						<el-form-item label="甲方">
							<el-select filterable clearable v-model="formData.PartyA">
								<el-option v-for="item in supplierList" :value="item.Id" :label="item.Name"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getTableData">查询</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="6" :lg="6" align="right">
						<el-form-item>
							<el-button type="success" @click="dialogAddForm.show = true">新建</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="warning" @click="getExportByGetList">导出筛选数据</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="ExportAllHandler">导出全部数据</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 				<el-row>
					<el-col :span="24">
						<el-form-item>
							<el-button type="success" @click="dialogAddForm.show = true">新建</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="warning" @click="getExportByGetList">导出筛选数据</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getExportByGetList">导出全部数据</el-button>
						</el-form-item>						
					</el-col>					
				</el-row> -->
			</el-form>
		</div>
		<div :style="tableHeight">
			<el-table :data="tableData" border height="100%" v-loading="pagination.loading">
				<el-table-column type="index" label="序号" width="50" align="center"
					:index="indexMethod"></el-table-column>
				<el-table-column label="项目" align="center" prop="ProjectName"></el-table-column>
				<el-table-column label="开始时间" align="center" prop="CreateDate">
					<template slot-scope="scope">
						{{ timeFormat(scope.row.CreateDate) }}
					</template>
				</el-table-column>
				<el-table-column label="项目编号" align="center" prop="ProjectNumber"></el-table-column>
				<el-table-column label="甲方" align="center" prop="PartyA">
					<template slot-scope="scope">
						{{ getMessageInfo(scope.row).Name }}
					</template>
				</el-table-column>
				<el-table-column label="立项单位" prop="CompanyId" align="center">
					<template slot-scope="scope">
						{{ getCompanyNameInfo(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" size="mini" style="margin-left: 10px;"
							@click="dialogUpdataFormEvent(scope.row)">详情</el-button>
						<el-popconfirm title="这是一段内容确定删除吗" @confirm="deletePayrollDetails(scope.row)"
							style="padding-left: 10px;">
							<el-button slot="reference" plain type="danger" size="mini">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-row>
				<el-col :span="24" align="right">
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
		<el-dialog :visible.sync="dialogAddForm.show" :title="dialogAddForm.title" width="550px"
			@close="dialogAddFormCloseEvent">
			<AddProject :closeFun="closeFun" :isShow="dialogAddForm.show" :companyList="companyList"
				ref="AddBankInfoRef"></AddProject>
		</el-dialog>
		<el-dialog :visible.sync="dialogUpdataForm.show" :title="dialogUpdataForm.title" width="550px">
			<UpProject :closeFun="closeFun" :updata="dialogUpdataForm.updata" :companyList="companyList"
				ref="UpdataBankInfoRef"></UpProject>
		</el-dialog>
	</div>
</template>

<script>
	import * as dayjs from 'dayjs'
	import AddProject from './AddProject.vue'
	import UpProject from './UpProject.vue'
	export default {
		components: {
			AddProject,
			UpProject
		},
		data() {
			return {
				formData: {
					BankInfo: '',
					StartTime: '',
					EndTime: '',
					PartyA: '',
				},
				tableData: [],
				//分页数据绑定
				pagination: {
					loading: false,
					currentPage: 1,
					pagesizes: [100, 500, 1000, 3000],
					pagesize: 100,
					total: 0
				},
				dialogAddForm: {
					show: false,
					title: '新建项目'
				},
				dialogUpdataForm: {
					show: false,
					title: '修改项目信息',
					updata: {},
				},
				supplierList: [],
				companyList: [],
				tableHeight: '',
			}
		},
		created() {
			this.getSupplierList()
			this.getCompanyList()
		},
		mounted() {
			let _this = this
			this.$nextTick(() => {
				this.getTableData()
				this.getdivHeight()
			})
			window.addEventListener('resize', () => {
				this.getdivHeight()
			})
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			getTableData() {
				this.pagination.loading = true
				this.$http.post('/api/Project/GetList/query', {
					Key: this.formData.BankInfo,
					StartTime: this.formData.StartTime == '' ? null : this.formData.StartTime,
					EndTime: this.formData.EndTime == '' ? null : this.formData.EndTime,
					PartyA: this.formData.PartyA == '' ? 0 : this.formData.PartyA,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.tableData = Data.Data
					} else {
						this.tableData = []
						this.$message.warning(Message)
					}
					this.pagination.total = Data.Total
					setTimeout(() => {
						this.pagination.loading = false
					}, 500)
				}).catch(() => {
					setTimeout(() => {
						this.pagination.loading = false
					}, 500)
				})
			},
			closeFun() {
				this.getSupplierList()
				this.getTableData()
			},
			dialogAddFormCloseEvent() {
				this.$refs.AddBankInfoRef.resetFieldsEvent()
			},
			deletePayrollDetails(row) {
				this.$http.post('/api/Project/Delete/delete', {
					Ids: [row.Id]
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('删除成功')
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			dialogUpdataFormEvent(row) {
				this.dialogUpdataForm.updata = row
				this.dialogUpdataForm.show = true
			},
			getSupplierList() {
				this.$http.post('/api/Values/GetSupplier').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.supplierList = Data.Data
					else this.supplierList = []
				})
			},
			getMessageInfo(row) {
				return this.supplierList.find(x => x.Id == row.PartyA)
			},
			getCompanyNameInfo(row) {
				var company = this.companyList.find(x=>x.Id == row.CompanyId)
				return company==undefined?'':company.CompanyName
			},
			timeFormat(time) {
				if (time == '' || time == null) return ''
				else return dayjs(time).format('YYYY-MM-DD')
			},
			//获取高度
			getdivHeight() {
				let idvcheight = this.$refs.divForm.clientHeight
				let asda = idvcheight + 32
				this.tableHeight = {
					'height': `calc(100% - ${asda +'px'})`
				}
			},
			//导出数据
			getExportByGetList() {
				this.$http.post('/api/Project/ExportByGetList/ExportByGetList', {
					Key: this.formData.BankInfo,
					StartTime: this.formData.StartTime == '' ? null : this.formData.StartTime,
					EndTime: this.formData.EndTime == '' ? null : this.formData.EndTime,
					PartyA: this.formData.PartyA == '' ? 0 : this.formData.PartyA,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g, "/");
						window.location.href = this.$http.defaults.baseURL + "/" + path
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//全部导出
			ExportAllHandler() {
				this.$http.post('/api/Project/ExportAll/ExportAll').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g, "/");
						window.location.href = this.$http.defaults.baseURL + "/" + path
					} else {
						this.$message.warning(Message)
					}
				})
			},
			getCompanyList() {
				this.$http.post('/api/Values/GetCompany').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.companyList = Data.Data
					else this.tableData = []
				})
			},
		}
	}
</script>

<style>
</style>